<template>
    <div class="header" @click="mark($event)">
        <img :src="codeInfo.base64img" alt="" class="code-img">
        <div class="mark" v-for="(item, index) in codeInfo.x_y"
            :style="`margin-top:${item[1] + 'px'};margin-left:${item[0] + 'px'}`">{{ index + 1 }}</div>
            <div v-if="false" :class="codeResult.type?'success':'false'" >{{ codeResult.type? '验证成功':'验证失败' }}</div>
    </div>
    <div class="mid">请依次点击:<span v-for="(item, index) in codeInfo.textSort"
            :class="codeInfo.x_y.length > index ? 'text-click' : 'text'">{{ item }}</span></div>
    <hr>
    <div class="footer">

        <el-icon 
        @click="onImgcode"
        color="red" :size="30">
            <Refresh />
        </el-icon>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { uuid } from '@/utils/random'
import { Refresh } from '@element-plus/icons-vue'
import {base64img} from '@/components/img'
import {getCodeImg,login} from '@/api/login'
const emit = defineEmits(['getCodeInfo'])
const codeResult = ref({
    show:false,
    type:true
})
const codeInfo = ref({
    base64img:base64img,
    x_y: [],
    textSort: ['或', '后'],
    uuid: ''
})
const onImgcode = async () => {
    codeInfo.value.uuid = uuid()
    codeInfo.value.x_y = []
     const res =await getCodeImg({uuid:codeInfo.value.uuid})
    if(res.code == 200){
        codeInfo.value.textSort = res.data.text
        codeInfo.value.base64img = res.data.base64_img
    }

}
onImgcode()
const mark = (event) => {
    if (codeInfo.value.x_y.length < codeInfo.value.textSort.length)
        codeInfo.value.x_y.push([event.offsetX - 10, event.offsetY - 10]);
    if (codeInfo.value.x_y.length == codeInfo.value.textSort.length) {
        emit('getCodeInfo',codeInfo.value.uuid,codeInfo.value.x_y)
        onImgcode()

    }
}

</script>
<style lang="scss">
* {
    user-select: none;
}

.header {
    position: relative;
    height: 200px;
    width: 320px;
    background-image: url('https://imgapi.xl0408.top/index.php');
    background-position: center;
    background-size: cover;
    .code-img{
        position: absolute;
        height: 200px;
        width: 320px;
    }
    .mark {
        position: absolute;
        width: 20px;
        height: 20px;
        z-index: 99;
        border-radius: 50%;
        line-height: 16px;
        text-align: center;
        border: 2px solid #fff;
        color: #fff;
        background-color: #0985eb;
    }
    .false{
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
        color: #fff;
        line-height: 30px;
        letter-spacing: 0.1em;
        font-size: 15px;
        font-weight: 550;
        text-align: center;
        background-color: rgb(247, 56, 88);
    }
    .success{
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
        color: #fff;
        line-height: 30px;
        letter-spacing: 0.1em;
        font-size: 15px;
        font-weight: 550;
        text-align: center;
        background-color: rgb(19, 197, 19);
    }
}

.mid {
    text-align: center;
    color: rgba(0, 0, 0, .6);
    letter-spacing: 0.1em;

    .text {
        margin: 0 5px;
        color: red;
        font-size: 18px;
        font-weight: 500;
    }

}

.text-click {
    margin: 0 5px;
    color: rgb(16, 133, 241);
    font-size: 18px;
    font-weight: 500;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
